<template>

    <v-card :style="{height:'90vh',backgroundColor:'#fafafa'}">
        <v-layout align-center justify-space-around wrap>
            <v-flex xs12 sm6 md2 text-xs-center>
                <v-text>合同有效期</v-text>
                <v-toolbar-title>20181010</v-toolbar-title>
                <v-spacer></v-spacer>
                <div>
                    <v-btn small>合同续期</v-btn>
                </div>
                <div>
                    <v-btn small color="primary" @click="paymentRecord">续期记录</v-btn>
                </div>
                <div>
                    <v-btn small color="error" @click="invoice">索要发票</v-btn>
                </div>
                <div>
                    <v-btn small color="success" @click="invoiceRecord">发票记录</v-btn>
                </div>
            </v-flex>
            <v-flex xs12 sm6 md5>
                <v-card>
                    <v-list>
                        <v-list-tile v-for="item in items" :key="item.title" @click="">
                            <v-list-tile-content>
                                <v-list-tile-title v-text="item.title"></v-list-tile-title>
                            </v-list-tile-content>
                            <v-list-tile-value>
                                <v-list-tile-title class="title-value" v-text="item.value"></v-list-tile-title>
                            </v-list-tile-value>
                        </v-list-tile>
                    </v-list>
                </v-card>
            </v-flex>
            <v-flex xs12 sm6 md5>
                <v-layout align-center justify-space-around wrap>
                    <v-flex xs4 sm6 md6>
                        <div class="text-md-center">企业logo</div>
                        <v-layout align-center justify-space-around wrap>
                            <img src="/static/logo.png" alt="Vue Material Admin" width="150" height="150"></v-img>
                        </v-layout>
                        <div>
                            <v-layout align-center justify-space-around wrap>
                                <v-flex xs6 sm2 md4 wrap text-xs-center>
                                    <v-btn color="#2196f3" @click="modifyImg()">修改</v-btn>
                                    <v-btn color="#2196f3">同步到分店</v-btn>
                                </v-flex>
                            </v-layout>
                        </div>
                    </v-flex>
                    <v-flex xs4 sm6 md6>
                        <div class="text-md-center">公众号二维码</div>
                        <v-layout align-center justify-space-around wrap>
                            <img src="/static/logo.png" alt="Vue Material Admin" width="150" height="150"></v-img>
                        </v-layout>
                        <div>
                            <v-layout align-center justify-space-around wrap>
                                <v-flex xs6 sm2 md4 wrap text-xs-center>
                                    <v-btn color="#2196f3" @click="modifyImg()">修改</v-btn>
                                    <v-btn color="#2196f3">同步到分店</v-btn>
                                </v-flex>
                            </v-layout>
                        </div>
                    </v-flex>
                </v-layout>
            </v-flex>
        </v-layout>
        <PaymentRecord :dialogPaymentRecord="dialogPaymentRecord" v-show="false"></PaymentRecord>
        <Invoice :dialogInvoice="dialogInvoice" v-show="false"></Invoice>
        <InvoiceRecord :dialogInvoiceRecord="dialogInvoiceRecord" v-show="false"></InvoiceRecord>
    </v-card>
</template>

<script>
import PaymentRecord from "./PaymentRecord.vue";
import Invoice from "./Invoice.vue";
import InvoiceRecord from "./InvoiceRecord.vue";
export default {
  name: "Content",
  data() {
    return {
      dialogPaymentRecord: false,
      dialogInvoice: false,
      dialogInvoiceRecord: false,
      items: [
        { icon: true, title: "商户信息", value: "" },
        { title: "商户名称", value: "金凤呈祥" },
        { title: "手机号", value: "18710010010" },
        { title: "固定电话", value: "2018" },
        { title: "地址", value: "陕西省西安市雁塔区科技路88号" }
      ]
    };
  },
  components: {
    PaymentRecord,
    Invoice,
    InvoiceRecord
  },
  mounted() {
    PubSub.subscribe("cancel", (msg, index) => {
      this.paymentRecord();
    });
    PubSub.subscribe("cancel1", (msg, index) => {
      this.invoice();
    });
    PubSub.subscribe("cancel2", (msg, index) => {
      this.invoiceRecord();
    });
  },
  methods: {
    paymentRecord() {
      this.dialogPaymentRecord = !this.dialogPaymentRecord;
    },
    invoice() {
      this.dialogInvoice = !this.dialogInvoice;
    },
    invoiceRecord() {
      this.dialogInvoiceRecord = !this.dialogInvoiceRecord;
    }
  }
};
</script>
